<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >
<title>Website</title>
<base target="_self" >

<link rel="stylesheet" href="/assets/style/common.css" type="text/css">
<link rel="stylesheet" href="/assets/style/custom.css" type="text/css">
<style type="text/css">
.wrapper { 
	margin-top: 32px;
	margin-bottom: auto;
	margin-left: 32px;
	margin-right: 32px;
	width: 800px; 
	text-align: left; 
	border: none; 
	clear: both;
}

.section-title {
	padding-left: 8px; 
	padding-right: 8px; 
	font-size: large;
	clear: both;
	text-align: left; 
}

.section {
	padding-left: 8px; 
	padding-right: 8px; 
	clear: both;
	text-align: left; 
}

#site-info:hover { 
	background-color: #000; 
} 

</style>

<script type="text/javascript" src="/assets/opt/script/jquery.js"></script>
<script type="text/javascript" src="/assets/script/uri-1.0.js"></script>
<script type="text/javascript" src="/assets/script/blacktea-1.0.js"></script>
<script type="text/javascript" src="/assets/script/common.js"></script>

<script id="siteinfo_tpl" type="text/x-blacktea-template">
	<div style="width: 50%; border: 0px solid blue; padding: 20px; margin: 20px;">
		<div id="site-avatar" style="margin: 0px; padding: 0px;">
	   	<img src="/avatar?peer=${site.id}"  style="float: left; height: 96px; width: 96px; margin: 0px 20px 20px 0px; padding: 0px;" />
	   	</div>
		<span id="site-name" style="font-weight: normal; font-size: x-large; color: #fff;">${site.name}</span><br />
		<span id="site-id" style="font-weight: bold; color: #fff;">${site.id}</span> <br /><br />
	   	<span id="site-message" style="font-weight: bold; color: #fff;">${site.message}</span>
	</div>
</script>

<script id="app_tpl" type="text/x-blacktea-template">
	<a class="cell" target="_blank" href="/content/${packageName}/?peer=${fn:peer}">
		<img src="/icon/${packageName}" />
		<div class="caption">${label}</div>
	</a>
</script>

<script id="peer_tpl" type="text/x-blacktea-template">	
	<a class="cell" target="_blank" href="${fn:appbase}&address=${username}">
		<img src="/assets/opt/tango-icon-theme/22x22/apps/${fn:status}" />
		<div class="caption">${fn:label}</div>
	</a>
</script>

<script id="wifi_tpl" type="text/x-blacktea-template">	
	<a class="cell" target="_blank" href="${fn:appbase}&address=${address}">
		<img src="/assets/opt/tango-icon-theme/22x22/apps/${fn:status}" />
		<div class="caption">${fn:label}</div>
	</a>
</script>

<script id="bluetooth_tpl" type="text/x-blacktea-template">	
	<a class="cell" target="_blank" href="${fn:appbase}&address=${address}">
		<img src="/assets/opt/tango-icon-theme/22x22/apps/${fn:status}" />
		<div class="caption">${fn:label}</div>
	</a>
</script>
		
<script type="text/javascript">
var spinner = '<img src="/image/spin.gif" alt="Please wait..." style="color: #fff;"><span style="color: #fff; font-size: xx-large;">...<blink>.....</blink></span>';

$.ajaxSetup ({  
	cache: false  
}); 

function loadHome() {
	//data is pre-loaded
	showHome(data);
	return false;
}

function loadPeers() {
	$.get("/bin/site/peer", function(d) {
		showPeers(d);
	});
	return false;
}

function loadWifi() {
	$.get("/bin/site/wifi", function(d) {
		showWifi(d);
	});
	return false;
}

function loadBluetooth() {
	$.get("/bin/site/bluetooth", function(d) {
		showBluetooth(d);
	});
	return false;
}

$(document).ready(function(){
	$.fullScreen();
	
	loadHome();
	//
	$('a.ajax').live('click', function() {
		var link = $(this).attr('href');
    	$('#page-content').html(spinner).load(link);
    	return false;
	});
	//
	$.initOptionMenu();
	//$.disableContextMenu();
	//	
	if (data) {
		$('#userid').html(data.user);
		if (data.authenticated) {
			$('.index-login').remove();
		} else {
			$('.index-logout').remove();
		}
	}
});

function gae() {
	var peer = data['site.id']; 
	var url = 'http://hotwebproxy.appspot.com/home/?type=html&peer='+peer;
	document.location.replace(url);
	return false;
}
</script>

<script type="text/javascript">
function showHome(d) {
	showTitle(d);
	showSiteInfo(d);
	showApps(d);
}

function showSiteInfo(d) {
	var sitepanel = $('#site-panel');
	var siteinfo = $('#site-info', sitepanel);
	if (d) {
		sitepanel.show();
		siteinfo.html(formatSiteInfo(d));
	} else {
		sitepanel.hide();
	}
}

function showApps(d, peer) {
	var apppanel = $('#application-panel');
	var applist = $('#application-list', apppanel);
	if (d && d.apps && d.apps.length > 0) { 
		apppanel.show(); 
		applist.html(formatApp(d, peer)); 
	} else { 
		apppanel.hide(); 
	}
}

function showPeers(d, app) {
	var panel = $('#peer-panel');
	var list = $('#peer-list', panel);
	panel.show(); 
	list.html(spinner);
	if (d && d.peers && d.peers.length > 0) { 
		list.html(formatPeer(d, app)); 
	} else {
		list.html("Not found");
	}
}

function showWifi(d) {
	var panel = $('#wifi-panel');
	var list = $('#wifi-list', panel);
	panel.show(); 
	list.html(spinner);
	if (d && d.devices && d.devices.length > 0) { 
		list.html(formatWifi(d)); 
	} else {
		list.html("Not found");
	}
}

function showBluetooth(d) {
	var panel = $('#bluetooth-panel');
	var list = $('#bluetooth-list', panel);
	panel.show(); 
	list.html(spinner);
	if (d && d.devices && d.devices.length > 0) { 
		list.html(formatBluetooth(d)); 
	} else {
		list.html("Not found");
	}
}

function showTitle(d, def) {
	document.title = (d ? d['site.name'] || d['site.id'] : (def ? def : 'Website'));
}

function formatSiteInfo(d) {
	return blacktea('siteinfo_tpl')(d);
}

function formatApp(data, id) {
	var fn = { 
		peer: (id ? id : data['site.id'] || '') 
	};
	return blacktea('app_tpl', data.apps, fn, '<br style="clear: both;" />', 7);
}

function formatPeer(data, app) {
	function baseQueryLink(l) {
		var idx = l.indexOf('?');
		if (idx == -1) {
			return l + '?';
		}
		var len_1 = l.length - 1;
		if (idx < len_1) {
			return l + '&';
		}
		//idx == len_1
		return l;
	}
	function formatLabel(label) {
		var idx = label.indexOf('@');
		return idx == -1 ? label : label.substring(0, idx) + '<br />' + label.substring(idx);
	}
	var fn = { 
		//appbase: baseQueryLink(app ? app : '/home/?type=html' ),
		appbase: function () {
			var r = this.realm || 'xmpp';
			return '/bin/connect?realm=' + r; 
		},
		status: function () {
			return this.status > 0 ? 'system-users.png' : 'system-users-off.png';
		},
		label: function () {
			var l = this.name || this.username;
			return formatLabel(l);
		}
	};
	return blacktea('peer_tpl', data.peers, fn, '<br style="clear: both;" />', 7);
}

function formatWifi(data) {
	var fn = { 
		appbase: function () { 
			return '/bin/connect?realm=wifi'; 
		},
		status: function () {
			return this.status > 0 ? 'system-users.png' : 'system-users-off.png';
		},
		label: function () {
			var l = this.name || this.address;
			return l;
		}
	};
	return blacktea('wifi_tpl', data.wifi, fn, '<br style="clear: both;" />', 7);
}

function formatBluetooth(data) {
	var fn = { 
		appbase: function () {
			return '/bin/connect?realm=btspp'; 
		},
		status: function () {
			return this.status > 0 ? 'system-users.png' : 'system-users-off.png';
		},
		label: function () {
			var l = this.name || this.address;
			return l;
		}
	};
	return blacktea('bluetooth_tpl', data.devices, fn, '<br style="clear: both;" />', 7);
}

</script>
</head>
<body >

<div id="topnav">
	<a class="logo" href="/home" title="Access your phone from a browser.">
	<img class="icon32" src="/icon/info.niwota.web"  alt="Website" >
	<span>Local</span>
	</a>

	<span class="top-right" style="margin-right: 8px;">
	<span class="action" id="userid"></span>&nbsp;&nbsp;
	<span class="action"><a href="/web/help.html" target="help">Help</a></span>&nbsp;|&nbsp;
	<span class="action index-logout"><a href="/logout">Logout</a></span>
	<span class="action index-login"><a href="/login">Login</a></span>	
	<span ><a href="#" onclick="return gae();" title="Google App Engine"><img src="/assets/image/gae22.png" /></a></span>	
	</span>
</div>

<!--page content-->
<div id="page-content">

<div id="site-panel" style="display: none;" class="wrapper">
<div id="site-info" class="section"></div>
</div>

<div id="application-panel" style="display: none;" class="wrapper">
<div class="section-title"></div>
<div id="application-list" class="section"></div>
</div>

<div class="wrapper"><a class="action" href="#" onclick="loadPeers();">Peers</a></div>

<div id="peer-panel" style="display: none;" class="wrapper">
<div class="section-title"></div>
<div id="peer-list" class="section"></div>
</div>

<!--
<div class="wrapper"><a class="action" href="#" onclick="loadWifi();">Wifi</a></div>

<div id="wifi-panel" style="display: none;" class="wrapper">
<div class="section-title"></div>
<div id="wifi-list" class="section">Wifi</div>
</div>
-->
<!--
<div class="wrapper"><a class="action" href="#" onclick="loadBluetooth();">Bluetooth</a></div>

<div id="bluetooth-panel" style="display: none;" class="wrapper">
<div class="section-title"></div>
<div id="bluetooth-list" class="section">Bluetooth</div>
</div>
-->

</div>
<!--//page content-->

<div id="optionmenu">
<a href="/home" title="Home" ><img src="/drawable/ic_menu_home" alt="" ></a>
<a href="/web/help.html" title="Help" target="_help"><img src="/drawable/ic_menu_help" alt="" ></a>
<a class="index-logout" href="/logout" title="Logout"><img src="/drawable/ic_menu_logout" alt="" ></a>
<a class="index-login" href="/login" title="Login"><img src="/drawable/ic_menu_login" alt="" ></a>
</div>

<div id="footer">Website 2.0.0 &copy; 2010 All rights reserved</div>

<div id="wallpaper" style="display: block;"><img src="/wallpaper" width="100%" height="100%" alt=""></div>

</body>
</html>

